@(gameon: Boolean = false)

@display(id: String) = {
  <select style="width:100%" id="@id" name="@id"
    @if( ! id.equals("type2")) {
      disabled="yes"
    }>
    @for((name, i) <- play.Play.application().configuration().getList("playerTypes").view.zipWithIndex) {
      <option value="@i">@name</option>
    }
  </select>
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="@routes.Assets.at("images/favicon.png")">

    <title>Demo : Welcome</title>

    <!-- Bootstrap core CSS -->
    <link href="@routes.Assets.at("stylesheets/bootstrap.css")" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="@routes.Assets.at("stylesheets/signin.css")" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
    <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
  </head>

  <body>

    <div class="container">

      @if(flash.containsKey("error")) {
          <div class="alert alert-danger">@flash.get("error")</div>
      }
      @if(flash.containsKey("warning")) {
          <div class="alert alert-warning">@flash.get("warning")</div>
      }
      @if(flash.containsKey("info")) {
          <div class="alert alert-info">@flash.get("info")</div>
      }
      @if(flash.containsKey("success")) {
          <div class="alert alert-success">@flash.get("success")</div>
      }

      <form action="@routes.Application.gameRoom()" method="" class="form-signin" autocomplete="off">

        <div class="row">
          <div class="col-md-3">
          </div>
          <div class="col-md-6">
            <h2 class="form-signin-heading">nickname</h2>
            <input name="username" type="text" class="form-control" placeholder="nickname" autofocus>
          </div>
          <div class="col-md-3">
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
                @if( ! gameon) {
                  <div style="height:20px; display: block"></div>
                  <h2 class="form-signin-heading">settings</h2>
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>Option</th>
                        <th>Value</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>Start cash</td>
                        <td>
                          <input type="text" name="in_cash" class="form-control" value="1000">
                        </td>
                      </tr>
                      <tr>
                        <td>Enter fee</td>
                        <td>
                          <input type="text" name="in_fee" class="form-control" value="75">
                        </td>
                      </tr>
                      </tbody>
                  </table>
                }
          </div>
          <div class="col-md-6">
                @if( ! gameon) {
                  <div style="height:20px; display: block"></div>
                  <h2 class="form-signin-heading">opponents</h2>
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th></th>
                        <th>Player type</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td></td>
                        <td>
                            @display(id = "type2")
                        </td>
                      </tr>
                        <tr>
                          <td><input type="checkbox"></td>
                          <td>
                            @display(id = "type3")
                          </td>
                        </tr>
                        <tr>
                          <td><input type="checkbox"></td>
                          <td>
                            @display(id = "type4")
                          </td>
                        </tr>
                      </tbody>
                  </table>
                }
          </div>
        </div>
        <div class="row">
          <div class="col-md-3"></div>
          <div class="col-md-6">
            <button class="btn btn-lg btn-primary btn-block" type="submit">Play</button>
          </div>
          <div class="col-md-3"></div>
        </div>

      </form>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">
    $(document).ready(function(){
      $('.form-signin').on('change', 'input[type=checkbox]', function(e) {
        $(this).parent().parent().find("select").prop("disabled", ! this.checked);
      });
    });
    </script>
  </body>
</html>